import React, {useEffect, useState} from 'react';
import {Button, Calendar, Card, Carousel, Spin} from "antd";
import classes from "./index.module.scss";
import 'dayjs/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
import {useLocation, useNavigate} from "react-router-dom";
import {useDispatch, useSelector} from "react-redux";
import {getActivityList} from "../../../store/frontDesk/activitySlice";
import moment from "moment";
import {debounce} from "lodash";
import LoginAlert from "../../../component/LoginAlert";
import {getToken} from "../../../utils/token";

const contentStyle = {
    height: '321px',
    color: '#fff',
    lineHeight: '321px',
    textAlign: 'center',
    background: '#364d79',
};

const Activity = () => {

    //分页的第一页
    let page = 1
    //获得redux的数据
    const dispatch = useDispatch()
    const {activity} = useSelector(state => state)

    const [loading, setLoading] = useState(false);
    const [open, setOpen] = useState(false);


    useEffect(() => {
        dispatch(getActivityList(page))
    }, [])

    const {pathname} = useLocation()
    useEffect(() => {
        if (pathname === '/activity') {
            window.addEventListener('scroll', handlerScroll, true)
            return () => window.removeEventListener('scroll', handlerScroll)
        }
    }, [])

    const handlerScroll = debounce(() => {
        let scrollTop = document.documentElement.scrollTop
        let clientHeight = document.documentElement.clientHeight
        let scrollHeight = document.documentElement.scrollHeight
        // console.log(Math.ceil(scrollTop), clientHeight, scrollHeight)
        let distanceToBottom = scrollHeight - (scrollTop + clientHeight)

        if (distanceToBottom <= 300) {
            if (page * 8 <= activity.activityList.length) {
                console.log(1)
                setLoading(false)
            } else if (page * 8 <= 1000) {
                page = page + 1
                dispatch(getActivityList(page))
                setLoading(true)
            }
        }
    }, 300)


    const nav = useNavigate()
    const goToActivityContent = (id, time) => {
        if (getToken()) {
            nav(`/activity-content`, {state: {id, time}})
        } else {
            setOpen(!open)
        }
    }


    return (
        <div className={classes.Activity}>
            {/*上班区走马灯与日历*/}
            <div className={classes.CarouselContainer}>
                <div style={{width: "50%", cursor: "pointer"}}>
                    <Carousel fullscreen={false} autoplay>
                        <div>
                            <img style={contentStyle}
                                 src="https://tse4-mm.cn.bing.net/th/id/OIP-C.8e4KgZ1XmKu2X2omyAgoFwHaEK?w=299&h=180&c=7&r=0&o=5&pid=1.7"
                                 alt=""/>
                        </div>
                        <div>
                            <img style={contentStyle}
                                 src="https://tse1-mm.cn.bing.net/th/id/OIP-C.QU3nGCAw7TwOj3XVYegH8AHaEK?w=288&h=180&c=7&r=0&o=5&pid=1.7"
                                 alt=""/>
                        </div>
                        <div>
                            <img style={contentStyle}
                                 src="https://tse2-mm.cn.bing.net/th/id/OIP-C.yvmZTE0e9a1L4uEg_h-AhwHaE7?w=261&h=180&c=7&r=0&o=5&pid=1.7"
                                 alt=""/>
                        </div>
                    </Carousel>
                </div>
                <div className={classes.Calendar}>
                    <Calendar locale={locale} fullscreen={false}/>
                </div>
            </div>
            <div className={classes.ActivityList}>
                {
                    activity.activityList.map((item, index) =>
                        <Card
                            onClick={() => goToActivityContent(item.id, item.start_time)}
                            className={classes.Activity}
                            bordered={false}
                            key={item.id}
                            headStyle={{padding: 0}}
                            title={
                                <img
                                    style={{width: "100%", height: 150, verticalAlign: "top"}}
                                    src={item.cover}
                                    alt=""/>
                            }
                        >
                            <div className={classes.ActivityDescribe}>
                                <div>
                                    {item.activity_name}
                                </div>
                                <span>{moment(item.time).format('YYYY-MM-DD')}</span>
                                <div className={classes.ActivityDescribeBottom}>
                                    <span>{item.place}</span>
                                    <Button type="primary">报名参加</Button>
                                </div>
                            </div>
                            {open && <LoginAlert open={open}></LoginAlert>}
                        </Card>
                    )
                }
            </div>
            {/*加载组件*/}
            <div style={{display: 'flex', justifyContent: 'center'}}>
                <Spin spinning={loading} size="large"/>
            </div>
        </div>
    );
};

export default Activity;